<script setup>
import {addApi,updateApi} from '@/api/quality/review'
import { ref,getCurrentInstance, onMounted } from 'vue'
import { getSchema } from '../../../api/schema'
import { getLogistics } from '../../../api/logistics'

// 定义物流列表
const logisticsList = ref([])
// 定义方案列表
const schemaList = ref([])
// 获取物流列表
const getLogisticsList = async()=> {
  let result = await getLogistics()
  logisticsList.value = result.data  
}
// 获取方案列表
const getSchemaList = async()=> {
  let result = await getSchema()
  schemaList.value = result.data  
}
onMounted(()=>{
  getLogisticsList()
  getSchemaList()
})

// 定义表单对象
const userForm = ref({
  logisticsNumb:'',
  executor:'',
  checkSchemaId:'',
})


// 表单引用
const formRef = ref()
// 弹出框定义
const dialogVisible = ref(false)
const show = (val)=>{
  dialogVisible.value = (val)
}
const handleClose = ()=>{
  dialogVisible.value = false 
}
const instance = getCurrentInstance()
// 新增清空表单方法
const resetForm = () => {
  userForm.value = {
  logisticsNumb:'',
  executor:'',
  checkSchemaId:'',
  }}
// 新增修改实现
const editSubmit = async() =>{
  await formRef.value.validate()
  let result
  if(userForm.value.id){
    result = await updateApi(userForm.value)
  }else{
    result = await addApi(userForm.value)
  }
  dialogVisible.value = false
// 通知父组件
  instance.emit('search')
}
// 暴露方法
defineExpose({
 dialogVisible,
  show,
  userForm,
  resetForm
})

</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="1200px"
    :before-close="handleClose"
  >
  <!-- 修改表单 -->
   <el-form 
      ref="formRef"
      :model="userForm" 
      :rules="rules"
      label-width="auto" 
      style="max-width: 1200px"
    >
    <el-row :gutter="10">
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="物流单号" prop="type">
          <el-select v-model="userForm.logisticsNumb" placeholder="请选择">
       <el-option v-for= "logistics in logisticsList" 
       :key="logistics.id"
       :label="logistics.logisticsNumb"
       :value="logistics.logisticsNumb"/>
      </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="检验员" prop="type">
          <el-input v-model="userForm.executor" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="检验方案" prop="type">
          <el-select v-model="userForm.checkSchemaId" placeholder="请选择">
       <el-option v-for= "schema in schemaList" 
       :key="schema.id"
       :label="schema.name"
       :value="schema.id"/>
      </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="editSubmit">保存</el-button>
      <el-button @click="dialogVisible=false">取消</el-button>
    </el-form-item>
   </el-form>
  </el-dialog>
</template>